<template>
  <div class="region-editor">
    <el-dialog :visible="visible" @close="close()" :close-on-click-modal="false" :title="this.isEdit ? '编辑区域' : '新增区域'">
      <el-form :model="regionForm" :rules="regionFormRules" ref="regionForm" label-width="100px">
        <el-form-item prop="name" label="区域名称">
          <el-input v-model="regionForm.name" />
        </el-form-item>

        <el-form-item label="区域负责人">
          <user-selector v-if="visible" @change="checkUsers" :user-list="regionForm.userList"></user-selector>
        </el-form-item>

        <el-form-item prop="context" label="责任要求">
          <ck-editor
            id="drawer-ckeditor"
            :withToolbar="false"
            ref="ckEditor"
            :change="contentChanged"
          />
        </el-form-item>

        <el-form-item prop="name" label="排序">
          <el-input-number v-model="regionForm.sort" />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CkEditor from '../../../../components/ckEditor/ckEditor'
import UserSelector from '../components/user-selector'
export default {
  name: 'RegionEditor',
  components: {
    UserSelector,
    CkEditor
  },
  data () {
    return {
      userList: [],
      regionForm: {
        id: '',
        name: '',
        userList: [],
        context: '',
        sort: 0
      },
      regionFormRules: {
        name: [{required: true, message: '请填写区域名称', trigger: 'blur'}],
        // userList: [{type: 'array', required: true, message: '请至少选择一个负责人', trigger: 'change'}]
      },
      isEdit: false,
      visible: false,
      removeIdList: []
    }
  },
  methods: {
    open (id) {
      this.visible = true
      if (id) {
        this.isEdit = true
        this.loadRegionInfo(id)
        this.regionForm.id = id
      } else {
        this.isEdit = false
        this.dataForm = {
          id: '',
          name: '',
          sort: 0
        }
        // this.$nextTick(() => {
        //   this.$refs.regionForm.resetFields()
        //   this.$refs.ckEditor.setData('')
        // })
      }
    },
    contentChanged(val) {
      this.regionForm.context = val
    },
    close () {
      this.visible = false
    },
    checkUsers (userList) {
      this.regionForm.userList = userList
    },
    async loadRegionInfo (id) {
      var res = await this.$http.post('/device/area/info/' + id)
      if (res.code === 200) {
        this.$refs.ckEditor && this.$refs.ckEditor.setData(res.data.context)
        this.regionForm.name = res.data.name
        if (res.data.list !== null) {
          this.regionForm.userList = res.data.list || []
        }
        // this.regionForm.userList = res.data.list !== null ? res.data.list : ''
      }
    },
    async save () {
      var isValid = await this.$refs.regionForm.validate()
      if (!isValid) return

      var url = this.isEdit ? '/device/area/update' : '/device/area/save'
      var res = await this.$http.post(url, {
        id: this.regionForm.id,
        name: this.regionForm.name,
        sort: this.regionForm.sort,
        context: this.regionForm.context,
        userIds: this.regionForm.userList.map(x => x.userId).join(',')
      })
      if (res.code === 200) {
        this.$notify.success({title: '成功', message: '保存区域成功'})
        this.close()
        this.$emit('refresh')
      } else {
        this.$notify.error({title: '错误', message: res.msg})
      }
    }
  }
}
</script>

<style>
  #drawer-ckeditor .ck-toolbar {
    display: none !important;
  }
</style>
